<template>
    <view class="main">
        <view class="input" :style="disabled?'background-color:#f5f7fa':''">
            <input @click="showModal" v-model="bValue" :style="disabled?'color:#c0c4cc':''" :placeholder="placeholder"
                disabled />
            <!-- <text v-if="clearable&&!disabled" @click="empty" class="selectIcon iconcross"></text> -->
        </view>
        <view class="select-modal" :class="isShowModal?'show':''" @tap="hideModal">
            <view class="select-dialog" @tap.stop="" :style="{backgroundColor:bgColor}">
                <view class="select-bar bg-white">
                    <view class="action txt-danger" @tap="cancelClick">{{cancelText}}</view>
                    <view class="action text-green" @tap="confirmClick">{{confirmText}}</view>
                </view>
                <view class="cu-bar search bg-white">
                    <view class="search-form ">
                        <text class="iconfont iconfont-search"></text>
                        <input @input="f_serbxjg" v-model="search" placeholder="请输入关键字"></input>
                        <text v-show="!f.sfnull(search)" @click="f_emptyserch" class="iconfont iconfont-close">
                        </text>
                    </view>
                </view>

                <view class="select-content">
                    <view class="select-item" v-for="(item,index) in searchData" :key="index"
                        :style="valueIndexOf(item)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'"
                        @click="select(item)">
                        <view class="title">{{getListKeyValue(item)}}</view>
                        <text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { Function } from './eval5.min.js';
    // import variables from '@/uni.scss'
    export default {
        data() {
            return {
                sfconfirm: false,
                search: '',
                isShowModal: false,
                sValue: null,
                bValue: "",
                searchData: []
            };
        },
        props: {
            value: [String, Array],
            placeholder: { // 占位符
                default: "",
                type: String
            },
            multiple: { // 是否多选
                default: false,
                type: Boolean
            },
            list: {
                default: () => [],
                type: Array
            },
            valueKey: { // 指定list中valueKey的值作为下拉框绑定内容
                default: null,
                type: String
            },
            listKey: { // 指定list中listKey的值作为下拉框显示内容
                default: null,
                type: String
            },
            disabled: {
                default: false,
                type: Boolean
            },
            clearable: {
                default: false,
                type: Boolean
            },
            cancelText: {
                default: "取消",
                type: String
            },
            confirmText: {
                default: "确定",
                type: String
            },
            color: {
                default: "#000000",
                type: String
            },
            selectColor: {
                default: "#3d4fae",
                type: String
            },
            bgColor: {
                default: "#F1F1F1",
                type: String
            },
            selectBgColor: {
                default: "#FFFFFF",
                type: String
            }
        },
        watch: {
            sValue(val) {
                this.bValue = this.getBValye(val)
                this.$emit('change', val)
            }
        },
        created() {
            if (Array.isArray(this.value)) {
                this.sValue = this.value ? this.value : []
            } else {
                this.sValue = this.value
            }
            this.f_serbxjg()
        },
        methods: {
            f_serbxjg() {
                var search = this.search;
                if (search) {
                    this.searchData = this.list.filter(function (lable) {
                        return Object.keys(lable).some(function (key) {
                            return (
                                String(lable[key])
                                    .toLowerCase()
                                    .indexOf(search) > -1
                            );
                        });
                    });
                } else {
                    this.searchData = this.list
                }
            },
            f_emptyserch() {
                this.search = ''
            },
            getBValye(val) { // 将数组值转换为以,隔开的字符串
                if (val.length > 0) {
                    if (Array.isArray(val)) {
                        let chooseAttr = []
                        val.forEach(item => {
                            let choose = this.list.find(temp => {
                                let val_val = this.getValueKeyValue(temp)
                                return item === val_val
                            })
                            chooseAttr.push(choose)
                        })
                        let values = chooseAttr.map(temp => this.getListKeyValue(temp)).join(',')
                        return values
                    } else {
                        let choose = this.list.find(temp => {
                            let val_val = this.getValueKeyValue(temp)
                            return val === val_val
                        })
                        return this.getListKeyValue(choose)
                    }
                } else {
                    return ""
                }
            },
            select(item) {
                console.log(item)
                let val = this.getValueKeyValue(item);
                if (this.multiple) {
                    let index = this.sValue.indexOf(val);
                    if (index != -1) {
                        this.sValue.splice(index, 1)
                    } else {
                        this.sValue.push(val)
                    }
                } else {
                    this.sValue = val
                    this.hideModal()
                }
            },
            valueIndexOf(item) {
                if (this.valueKey) {
                    return this.value.indexOf(this.evil(item)) != -1
                } else {
                    return this.value.indexOf(item) != -1
                }
            },
            getListKeyValue(item) {
                if (this.listKey) {
                    let func = new Function('item', 'return ' + 'item.' + this.listKey);
                    return func(item)
                } else {
                    return item
                }
            },
            getValueKeyValue(item) {
                if (this.valueKey) {
                    return this.evil(item)
                } else {
                    return item
                }
            },
            evil(item) {
                let func = new Function('item', 'return ' + 'item.' + this.valueKey);
                return func(item)
            },
            empty() {
                if (this.multiple) {
                    this.sValue = []
                } else {
                    this.sValue = ''
                }
            },
            init(val) {
                if (this.multiple) {
                    let index = this.sValue.indexOf(val);
                    if (index != -1) {
                        this.sValue.splice(index, 1)
                    } else {
                        this.sValue.push(val)
                    }
                } else {
                    this.sValue = val
                    this.hideModal()
                }
            },
            cancelClick() { // 点击取消
                this.$emit('cancel', this.sValue)
                this.searchData = this.list
                this.hideModal()
            },
            confirmClick() { // 点击确定
                var val = this.value
                if (this.multiple) {
                    let index = this.sValue.indexOf(val);
                    if (index != -1) {
                        this.sValue.splice(index, 1)
                    } else {
                        this.sValue.push(val)
                    }
                } else {
                    this.sValue = val
                    this.hideModal()
                }
            },
            showModal() {
                if (!this.disabled) {
                    this.isShowModal = true
                }
            },
            hideModal() {
                this.isShowModal = false
            }
        }
    }
</script>
<style lang="scss">
    @font-face {
        font-family: "selectIcon";
        src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208');
        /* IE9 */
        src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
            url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
            url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg');
        /* iOS 4.1- */
    }

    .search {
        max-width: 1000upx;

        .iconfont-search {
            padding-left: 20upx;
        }

        .iconfont-close {
            padding-right: 20upx;
        }

        // .cu-btn {
        //     height: 1.8rem;
        //     font-size: $uni-font-size-base;
        //     margin-left: 0.5rem;
        // }

        .bg-primary {
            background-color: $uni-font-size-base;
        }
    }

    .selectIcon {
        font-family: "selectIcon" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icongou:before {
        content: "\e61c";
    }

    .iconcross:before {
        content: "\e61a";
    }
</style>
<style lang="scss" scoped>
    .main {
        font-size: 28rpx;
        flex: 1;
    }

    .bg-white {
        background-color: #FFFFFF;
    }

    .text-blue {
        color: $uni-color-primary;
    }

    .text-green {
        color: $uni-color-primary;
    }

    .input {
        border: none;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        height: 60rpx;
        /* padding: 10rpx 20rpx; */
        font-size: 30upx;

        input {
            flex: 1;
        }
    }

    .select-modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        opacity: 0;
        outline: 0;
        text-align: center;
        -ms-transform: scale(1.185);
        transform: scale(1.185);
        backface-visibility: hidden;
        perspective: 2000rpx;
        background: rgba(0, 0, 0, 0.6);
        transition: all 0.3s ease-in-out 0s;
        pointer-events: none;
        margin-bottom: -1000rpx;

        &::before {
            content: "\200B";
            display: inline-block;
            height: 100%;
            vertical-align: bottom;
        }

        .select-dialog {
            position: fixed;
            bottom: 0;
            left: 0;
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            background-color: #f8f8f8;
            overflow: hidden;
            width: 100%;
            border-radius: 0;

            .select-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #fff;
                height: 420rpx;
                overflow: auto;

                .select-item {
                    width: 100%;
                    border-bottom: 1px solid #e5e5e5;
                    padding: 10rpx 20rpx;
                    display: flex;

                    .title {
                        text-align: center;
                        flex: 1;
                    }
                }
            }
        }
    }

    .select-modal.show {
        opacity: 1;
        transition-duration: 0.3s;
        -ms-transform: scale(1);
        transform: scale(1);
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
        margin-bottom: 0;
    }

    .select-bar {
        padding: 0 20rpx;
        display: flex;
        position: relative;
        align-items: center;
        min-height: 80rpx;
        justify-content: space-between;

        .action {
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;
            max-width: 100%;
        }
    }
</style>